<template>
	<view class="main">
		<liuyunoTabs :tabData="tabs" @tabClick="tabClick" />
		<view class="content">
			<view v-for="item in dataList" :key="item._id" class="content-item" @click="toProduction(item)">
				<image lazy-load :src="item.image" mode="widthFix"></image>
				<view class="content-title">
					{{ item.title }}
				</view>
			</view>
		</view>
	</view>
</template>

<script>
import liuyunoTabs from "@/components/liuyuno-tabs/liuyuno-tabs.vue";
import {
	vividTabs
} from "@/utils/sizeSpecification.js";
export default {
	components: {
		liuyunoTabs
	},
	data() {
		return {
			tabs: vividTabs,
			dataList: []
		};
	},
	onLoad() {
		this.tabClick(0);
	},
	methods: {
		async tabClick(id) {
			this.dataList = []
			const collection = uniCloud.database().collection("vividList")
			const {
				result
			} = await collection.where({
				menuId: id
			}).get()
			this.dataList = result.data
		},
		toProduction(item) {
			uni.navigateTo({
				url: `/pages/vivid/production?id=${item._id}`
			})
		}
	},
};
</script>

<style lang="scss" scoped>
.main {
	display: flex;
	flex-direction: column;
}

.content {
	flex: 1;
	overflow: auto;
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 24rpx;
	padding: 24rpx 32rpx 24rpx;
	margin-bottom: 24rpx;

	.content-item {
		box-shadow: 0rpx 8rpx 12rpx 0rpx rgba(0, 0, 0, 0.05);
		border-bottom-right-radius: 24rpx;
		border-bottom-left-radius: 24rpx;

		image {
			width: 100%;
			border-top-right-radius: 24rpx;
			border-top-left-radius: 24rpx;
		}

		.content-title {
			padding: 12rpx 24rpx;
			font-size: 32rpx;
		}
	}
}
</style>